<template>
  <div class="yy-order-detail">
    <el-table
      v-loading="loading"
      :data="postList"
      border
      stripe
      style="width: 100%">
      <el-table-column prop="orderno" align='center' label="订单编号"></el-table-column>
      <el-table-column prop="nickname" align='center' label="用户名"></el-table-column>
      <el-table-column align='center' label="实付">
        <template slot-scope="scope">
          <span>{{formatCurrency(scope.row.payamount)}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label="优惠金额">
        <template slot-scope="scope">
          <span>{{(scope.row.orderamount-scope.row.payamount).toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.servicemodel===1">普通订单</span>
          <span class="text-success" v-else-if="scope.row.servicemodel===2">单项套餐</span>
          <span class="text-navy" v-else-if="scope.row.servicemodel===3">多项套餐</span>
          <span class="text-info" v-else-if="scope.row.servicemodel===4">活动订单</span>
        </template>
      </el-table-column>
      <el-table-column prop="stylistName" align='center' label="预约美发师"></el-table-column>
      <el-table-column prop="createtime" align='center' label="创建时间" v-if="isShow"></el-table-column>
      <el-table-column prop="paytime" align='center' label="付款时间" v-if="!isShow"></el-table-column>
      <el-table-column prop="status" align='center' label="订单状态" :formatter="typeFormat"></el-table-column>
    </el-table>

    <el-row :gutter="20" class="mt20">
      <el-col :span="14">
        <div class="yy-header">订单信息</div>
        <div class="mt10">
          <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order">
            <el-form-item label="预约美发师">
              <span>{{orderData.stylistName}}</span>
            </el-form-item>
            <el-form-item label="服务门店">
              <span>{{orderData.storename}}</span>
            </el-form-item>
            <el-form-item label="预约时间">
              <span>{{appointment}}</span>
            </el-form-item>
            <el-form-item label="订单总价">
              <span>￥{{formatCurrency(orderData.orderamount)}}</span>
            </el-form-item>
            <el-form-item label="优惠券">
              <span>{{orderData.coupon}}</span>
            </el-form-item>
            <el-form-item label="平台补贴">
              <span>{{orderData.subsidy}}</span>
            </el-form-item>
            <el-form-item label="实付金额">
              <span>￥{{formatCurrency(orderData.payamount)}}</span>
            </el-form-item>
            <el-form-item label="服务项目" style="width: 100%">
              <span>{{service.length>0?service.join('+'):''}}</span>
            </el-form-item>
            <el-form-item label="备注" style="width: 100%">
              <span>{{orderData.remark}}</span>
            </el-form-item>
          </el-form>
        </div>

        <div class="yy-header mt10" v-if="orderData.servicemodel===2&&packageCoupon">单项套餐信息</div>
        <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order"
                 v-if="orderData.servicemodel===2&&packageCoupon">
          <el-form-item label="单项套餐券名称">
            <span>{{packageCoupon.servicename}}</span>
          </el-form-item>
          <el-form-item label="套餐总次数">
            <span>{{packageCoupon.totaltimes}}次</span>
          </el-form-item>
          <el-form-item label="套餐剩余次数">
            <span>{{packageCoupon.stocktimes}}次</span>
          </el-form-item>
          <el-form-item label="购买时间">
            <span>{{packageCoupon.createtime}}</span>
          </el-form-item>
          <el-form-item label="原价">
            <span>￥{{packageCoupon.amount|currencyFilter}}</span>
          </el-form-item>
          <el-form-item label="实付金额">
            <span>￥{{packageCoupon.payamount|currencyFilter}}</span>
          </el-form-item>
        </el-form>

        <div class="yy-header mt10">其它信息</div>
        <!--待接单-->
        <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order"
                 v-if="orderData.status===3">
          <el-form-item label="支付订单号">
            <span>{{orderData.payno}}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{typeFormat(orderData,{property:'paytype'})}}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{orderData.createtime}}</span>
          </el-form-item>
        </el-form>
        <!--待完成-->
        <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order"
                 v-if="orderData.status===4||orderData.status===6">
          <el-form-item label="支付订单号">
            <span>{{orderData.payno}}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{typeFormat(orderData,{property:'paytype'})}}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{orderData.createtime}}</span>
          </el-form-item>
          <el-form-item label="接单时间">
            <span>{{orderData.starttime}}</span>
          </el-form-item>
        </el-form>

        <!--取消中14-->
        <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order"
                 v-if="orderData.status===14">
          <el-form-item label="支付订单号">
            <span>{{orderData.payno}}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{typeFormat(orderData,{property:'paytype'})}}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{orderData.createtime}}</span>
          </el-form-item>
          <el-form-item label="接单时间">
            <span>{{orderData.starttime}}</span>
          </el-form-item>
          <el-form-item label="取消订单时间" class="text-danger">
            <span>{{orderData.canceltime}}</span>
          </el-form-item>
        </el-form>
        <!--已取消2,5,12,13,15-->
        <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order"
                 v-if="orderData.status===2||orderData.status===5||orderData.status===12||orderData.status===13||orderData.status===15">
          <el-form-item label="支付订单号">
            <span>{{orderData.payno}}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{typeFormat(orderData,{property:'paytype'})}}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{orderData.createtime}}</span>
          </el-form-item>
          <el-form-item label="接单时间">
            <span>{{orderData.starttime}}</span>
          </el-form-item>
          <el-form-item label="取消订单时间" class="text-danger">
            <span>{{orderData.canceltime}}</span>
          </el-form-item>
          <el-form-item label="退款时间" class="text-danger">
            <span>{{orderData.refundtime}}</span>
          </el-form-item>
        </el-form>

        <!--已完成-->
        <el-form label-position="left" label-width="120px" inline class="yy-form yy-form-order"
                 v-if="orderData.status===11||orderData.status===18">
          <el-form-item label="支付订单号" v-if="orderData.status===3">
            <span>{{orderData.payno}}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{typeFormat(orderData,{property:'paytype'})}}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{orderData.createtime}}</span>
          </el-form-item>
          <el-form-item label="接单时间">
            <span>{{orderData.starttime}}</span>
          </el-form-item>
          <el-form-item label="核销时间">
            <span>{{orderData.endtime}}</span>
          </el-form-item>
        </el-form>


      </el-col>


      <el-col :span="10">
        <div class="yy-header">用户信息</div>
        <el-form label-position="left" inline class="yy-form">
          <el-form-item label="昵称">
            <span>{{orderData.nickname}}</span>
          </el-form-item>
          <el-form-item label="用户编号">
            <span>{{orderData.userno}}</span>
          </el-form-item>
          <el-form-item label="手机号">
            <span>{{orderData.userMobile}}</span>
          </el-form-item>
        </el-form>
        <div class="yy-header mt10">美发师信息</div>
        <el-form label-position="left" inline class="yy-form">
          <el-form-item label="昵称">
            <span>{{orderData.stylistName}}</span>
          </el-form-item>
          <el-form-item label="美发师编号">
            <span>{{orderData.stylistno}}</span>
          </el-form-item>
          <el-form-item label="手机号">
            <span>{{orderData.stylistMobile}}</span>
          </el-form-item>

        </el-form>
        <div class="yy-header mt10">门店信息</div>
        <div class="mt10 yy-info">
          <el-form label-position="left" inline class="yy-form">
            <el-form-item label="门店编号">
              <span>{{orderData.storeno}}</span>
            </el-form-item>
            <el-form-item label="门店名">
              <span>{{orderData.storename}}</span>
            </el-form-item>
            <el-form-item label="手机号">
              <span>{{orderData.storeMobile}}</span>
            </el-form-item>

            <el-form-item label="门店地址">
              <span>{{storeAddress}}</span>
            </el-form-item>
          </el-form>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {detail} from "@/api/main/order/index";

  export default {
    props: {
      order: {
        type: Object,
        require: true
      }
    },
    data() {
      return {
        isShow: false,
        loading: false,
        postList: [],
        payOptions: [
          {dictValue: 'alipay', dictLabel: '支付宝支付'},
          {dictValue: 'weixin', dictLabel: '微信支付'},
          {dictValue: 'package', dictLabel: '套餐支付'},
          {dictValue: 'blance', dictLabel: '钱包支付'},
          {dictValue: 'virtual', dictLabel: '虚拟余额'}],
        statusOptions: [],
        storeAddress: '',
        orderData: {},
        service: {},
        appointment: '',
        packageCoupon: undefined
      }
    },
    created() {
      this.getDicts("yy_order_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getOrder();
    },
    methods: {
      getOrder() {
        this.loading = true;
        detail({id: this.order.id}).then(response => {
          if (response.data.detail.status === 1) {
            this.isShow = true;
          }
          //拼装service数据
          let arr = [];
          for (let i = 0; i < response.data.service.length; i++) {
            let optionValue = response.data.service[i].optionvalue;
            let serviceName = response.data.service[i].serviceName;
            if (optionValue) {
              serviceName += '(' + optionValue + ')';
            }
            if (response.data.detail.servicemodel === 1 || response.data.detail.servicemodel === 4) {
              let price = response.data.service[i].price;
              if (price) {
                serviceName += ' ￥' + price;
              }
            }
            arr.push(serviceName);
          }

          if (response.data.appointment && response.data.appointment.length > 1) {
            console.log('原预约时间未获取');
            let date = response.data.appointment[1].orderdate + "";
            date = date.replace(/(\d{4})(\d{2})(\d{2})/mg, '$1-$2-$3');
            let usetime = JSON.parse(response.data.appointment[1].usetime);
            this.appointment = date + " " + usetime[0];
          } else {
            let date = response.data.appointment[0].orderdate + "";
            date = date.replace(/(\d{4})(\d{2})(\d{2})/mg, '$1-$2-$3');
            let usetime = JSON.parse(response.data.appointment[0].usetime);
            this.appointment = date + " " + usetime[0];
          }

          if (response.data.packageCoupon) {
            this.packageCoupon = response.data.packageCoupon;
          }


          this.service = arr;
          this.orderData = response.data.detail;
          this.postList.push(response.data.detail);
          let address = response.data.storeAddress;
          this.storeAddress = address.province + address.city + address.district + address.location;
          this.loading = false;
        });
      },
      typeFormat(row, column) {
        console.log(row);
        console.log(row[column.property])
        let option;
        if (column.property === 'status') {
          option = this.statusOptions;
        }
        if (column.property === 'paytype') {
          option = this.payOptions;
        }
        console.log(option);
        return this.selectDictLabel(option, row[column.property]);
      }
    }
  }
</script>

<style>

  .yy-order-detail .yy-form {
    font-size: 0;
    padding-left: 20px;
  }

  .yy-order-detail .yy-form label {
    width: 100px;
    font-size: 14px;
  }

  .yy-order-detail .yy-form .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 90%;
  }

  .yy-order-detail .yy-form-order .el-form-item {
    width: 50%;
  }

  .yy-order-detail .mt20 {
    margin-top: 20px;
  }

  .yy-order-detail .mt10 {
    margin-top: 10px;
  }

  .yy-order-detail .yy-header {
    background-color: #F2F2F2;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    color: rgba(16, 16, 16, 1);
    padding-left: 20px;
    font-weight: 600;
  }
</style>
